<template>
  <view class="withdraw" id="withdraw">
    <!-- 可提现金额 -->
    <view class="has-withdraw boxShadow">
      <view>
        <view class="tips">可提现金额</view>
        <view class="has-price"> ￥{{ walletInfoData.active / 100 }}</view>
      </view>
      <view>
        <view>
          <view class="price"> ￥{{ walletInfoData.total / 100 }}</view>
          <view class="tips"> 账户余额</view>
        </view>
        <view>
          <view class="price"> ￥{{ walletInfoData.withdraw / 100 }}</view>
          <view class="tips"> 总提现金额</view>
        </view>
      </view>

      <view>
        <u-button
          :custom-style="customStyle"
          shape="circle"
          size="medium"
          :ripple="true"
          @click="poupShow = true"
          >申请提现</u-button
        >
        <view> 每天最多提现一次 </view>
      </view>
    </view>

    <!-- <view class="sell boxShadow">
      <view>
        <view> 总销售额：￥1952.76</view>
        <view> 总利润：￥365.07</view>
      </view>
      <view> 库存商品进货总额：￥0.00</view>
    </view> -->

    <view class="bar boxShadow">
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 钱包余额</view>
        <view class="u-line-1 money"> ￥{{ walletInfoData.total / 100 }}</view>
      </view>
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 可提现金额</view>
        <view class="u-line-1 money"> ￥{{ walletInfoData.active / 100 }}</view>
      </view>
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 已提现金额</view>
        <view class="u-line-1 money">
          ￥{{ walletInfoData.withdraw / 100 }}</view
        >
      </view>
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 订单收入</view>
        <view class="u-line-1 money"> ￥{{ walletInfoData.income / 100 }}</view>
      </view>
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 系统铺货金额</view>
        <view class="u-line-1 money"> ￥{{ walletInfoData.system / 100 }}</view>
      </view>
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 采购花费</view>
        <view class="u-line-1 money">
          ￥{{ walletInfoData.purchase / 100 }}</view
        >
      </view>
      <view class="withdraw-list1">
        <view class="u-line-1 time"> 充值金额</view>
        <view class="u-line-1 money"> ￥{{ walletInfoData.topup / 100 }}</view>
      </view>
    </view>

    <view class="bar boxShadow bar1" ref="walletDetail">
      <u-sticky @fixed="atTop" @unfixed="noTop">
        <u-tabs
          name="cate_name"
          count="cate_count"
          :list="list"
          :height="100"
          :is-scroll="true"
          :bg-color="showPadding == true ? '#ffffff' : '#D65C45'"
          :active-color="showPadding == true ? '#D65C45' : '#ffffff'"
          :current="current"
          @change="change"
        ></u-tabs>
      </u-sticky>
      <u-collapse>
        <u-collapse-item
          :title="item.head"
          v-for="(item, index) in withdrawList"
          :key="index"
          :head-style="{ borderBottom: '1rpx solid red' }"
        >
          <template v-slot:title-all>
            <view class="withdraw-list">
              <view class="u-line-1 time"> {{ item.created_at }}</view>
              <view class="u-line-1 money"> ￥{{ item.amount }}</view>
              <view class="u-line-1"
                ><u-tag
                  :text="item.show_title"
                  :closeable="false"
                  mode="dark"
                  type="success"
                  shape="circle"
                />
              </view>
            </view>
            <view style="border-bottom: 1rpx solid #e6e6e6"></view>
          </template>
          <view class="detail-list">
            <view>
              <view>变动的金额：</view>
              <view>{{ item.amount }}</view>
            </view>
            <view>
              <view>变动之前的金额：</view>
              <view>{{ item.before_amount }}</view>
            </view>
            <view>
              <view>变动之后的金额：</view>
              <view>{{ item.after_amount }}</view>
            </view>
            <view>
              <view>时间：</view>
              <view>{{ item.created_at }}</view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>

    <!-- 提现弹窗 -->
    <u-popup
      v-model="poupShow"
      mode="center"
      width="90%"
      :duration="0"
      :border-radius="20"
      :closeable="true"
    >
      <view class="title">提现</view>
      <view class="content">
        <view class="monery">
          <view>￥</view>
          <view>
            <u-input
              v-model="form.amount"
              type="number"
              :focus="true"
              placeholder="金额"
              :border="false"
              :clearable="false"
            />
          </view>
        </view>
        <view class="has-tixian"
          >可以提现金额￥ <span>{{ walletInfoData.active / 100 }}</span></view
        >
        <u-input
          v-model="form.apply_remark"
          type="textarea"
          placeholder="申请描述"
          :height="200"
          :maxlength="500"
          :border="true"
          :clearable="false"
        />
      </view>
      <view
        class="tixian"
        :style="{ backgroundColor: form.hasOk == true ? '#d65c45' : 'gray' }"
        @click="withDrawApply"
        >提现</view
      >
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      poupShow: false,
      showPadding: true,
      customStyle: {
        color: "#FFFFFF",
        backgroundColor: "#D65C45",
      },
      list: [
        {
          cate_name: "充值记录",
        },
        {
          cate_name: "提现记录",
        },
        {
          cate_name: "进货记录",
        },
        {
          cate_name: "订单收入",
        },
        {
          cate_name: "系统授信",
        },
        {
          cate_name: "提现退款",
        },
        {
          cate_name: "退款流水",
        },
      ],
      withdrawList: [],
      current: 0,
      form: {
        amount: null,
        apply_remark: "",
        hasOk: false,
      },
      walletInfoData: {}, //钱包信息
      page: 1,
      page_size: 20,
    };
  },
  onShow() {
    this.walletInfo();
    this.walletDetail();
  },
  watch: {
    form: {
      handler(newV, oldV) {
        if (newV.amount === null || newV.amount === "" || newV.amount === "0") {
          this.form.hasOk = false;
          return;
        }

        if (newV.amount * 100 > this.walletInfoData.active) {
          this.form.hasOk = false;
        } else {
          this.form.hasOk = true;
        }
      },
      deep: true,
    },
  },
  methods: {
    /**
     * 切换
     */
    change(e) {
      this.page = 1;

      this.current = e;
      this.walletDetail();
    },
    /**
     * 到达底部
     */
    onReachBottom(e) {
      // 页面加 1
      this.page += 1;
      var form = {
        page: this.page,
        type: this.current + 1,
        page_size: this.page_size,
      };
      this.$u.api.walletTransactionApi(form).then((res) => {
        if (res.is_all === 1) {
          this.$u.toast("暂无更多记录");
          return;
        }
        this.withdrawList.push(...res.list);
      });
    },
    /**
     * 到达顶部
     */
    atTop() {
      console.log(this.showPadding);
      this.showPadding = false;
    },
    /**
     * 离开顶部
     */
    noTop() {
      console.log(this.showPadding);
      this.showPadding = true;
    },
    /**
     * 申请提现
     */
    withDrawApply() {
      if (
        this.form.amount === null ||
        this.form.amount === "" ||
        this.form.amount === 0
      ) {
        return;
      }
      if (this.form.hasOk) {
        this.$u.api.withDrawApplyApi(this.form).then((res) => {
          this.walletInfo();
          uni.showToast({
            title: "申请成功",
            duration: 2000,
          });
          this.poupShow = false;
        });
      }
    },
    /**
     * 获取钱包详情
     */
    walletInfo() {
      this.$u.api.walletInfoApi().then((res) => {
        this.walletInfoData = res;
      });
    },
    /**
     * 钱包明细
     */
    walletDetail() {
      var form = {
        page: this.page,
        type: this.current + 1,
        page_size: this.page_size,
      };
      this.$u.api.walletTransactionApi(form).then((res) => {
        this.withdrawList = res.list;
      });
    },
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tips {
  font-size: 24rpx;
}
.price {
  font-size: 32rpx;
}
.title {
  padding: 20rpx;
  margin: 0 auto;
  font-size: 30rpx;
  font-weight: bold;
}
.tixian {
  background-color: #d65c45;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #ffffff;
  font-size: 30rpx;
}
.has-tixian {
  padding-bottom: 30rpx;
  font-size: 24rpx;
  color: #999999;
}
.detail-list {
  background-color: #f4f4f5;
  & > view {
    @include flex-row;
    padding: 10rpx 40rpx;
  }
}
.content {
  /* margin-top: 20rpx; */
  padding: 30rpx 20rpx;
  .monery {
    padding: 10rpx 0;
    border-bottom: 2rpx solid #e6e6e6;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    & > view:nth-child(1) {
      width: 50rpx;
      font-size: 50rpx;
    }
    & > view:nth-child(2) {
      flex: 1;
    }
  }
}
.withdraw {
  background-color: #f7f7f7;
  min-height: 101vh;
  /* padding: 10rpx 20rpx; */
  .bar1 {
    min-height: 100vh;
  }
  .bar {
    background-color: #ffffff;
    /* border-radius: 20rpx; */
    /* padding: 15rpx 0; */
    margin-top: 20rpx;
    .withdraw-list {
      display: grid;
      grid-template-rows: repeat(auto-fill, 90rpx);
      /* grid-template-columns: repeat(3, 33.333333333%); */
      grid-template-columns: 50% 25% 25%;
      background-color: #ffffff;
      padding: 0 5rpx;
      .time {
        font-size: 24rpx;
      }
      .money {
        color: #d65c45;
      }
      & > view {
        text-align: center;
        line-height: 90rpx;
      }
      & > view:nth-child(1) {
        text-align: start;
        padding-left: 20rpx;
      }
      & > view:nth-child(2) {
        text-align: start;
      }
    }
    .withdraw-list1 {
      display: grid;
      grid-template-rows: repeat(auto-fill, 90rpx);
      grid-template-columns: 60% 40%;
      border-bottom: 1rpx solid #e6e6e6;
      padding: 0 5rpx;
      .time {
        font-size: 24rpx;
      }
      .money {
        color: #d65c45;
        text-align: start;
      }
      & > view {
        text-align: center;
        line-height: 90rpx;
      }
    }

    .withdraw-list:last-child {
      border-bottom: none;
    }
    .withdraw-list1:last-child {
      border-bottom: none;
    }
  }
  .has-withdraw {
    background-color: #ffffff;
    /* border-radius: 20rpx; */
    padding: 20rpx;

    & > view:nth-child(1) {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      padding: 20rpx 0;
      .has-price {
        font-size: 36rpx;
        color: #d65c45;
        margin-left: 10rpx;
      }
    }
    & > view:nth-child(2) {
      display: grid;
      grid-template-rows: repeat(auto-fill, 70rpx);
      grid-template-columns: repeat(2, 50%);
      padding: 20rpx 0;
      & > view {
        text-align: center;
      }
      & > view:first-child {
        border-right: 1rpx solid #e6e6e6;
      }
    }
    & > view:nth-child(3) {
      text-align: center;
      margin-top: 20rpx;
      & > view {
        padding: 10rpx 0;
        color: #999999;
        font-size: 24rpx;
      }
    }
  }
  .sell {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    & > view:nth-child(1) {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: flex-end;
      padding-bottom: 10rpx;
    }
    & > view:last-child {
      text-align: center;
    }
  }
}
</style>
